<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
<style>
    #carousel-example-generic{
        width: 460px;
        margin: 50px auto 0;
    }
</style>
</head>
<body>
    
<!-- 
    插件
    必须先引入jQuery在引入bootstrap的js

    通过 data 属性 API 就能使用所有的 Bootstrap 插件
 -->

 <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">按钮1</button>
 <button type="button" class="btn btn-default" data-dismiss="modal">按钮2</button>

 <div id="mymodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">头部标题</h4>
        </div>

        <div class="modal-body">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">保存</button>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
  
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./imgs/c1.jpg" alt="...">
        <div class="carousel-caption">
          妹子11
        </div>
      </div>
      <div class="item">
        <img src="./imgs/c2.jpg" alt="...">
        <div class="carousel-caption">
          妹子22
        </div>
      </div>
      <div class="item">
        <img src="./imgs/c3.jpg" alt="...">
        <div class="carousel-caption">
          妹子33
        </div>
      </div>
      <div class="item">
        <img src="./imgs/c4.jpg" alt="...">
        <div class="carousel-caption">
          妹子44
        </div>
      </div>
    </div>
  
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">上一页</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">下一页</span>
    </a>
</div>

<script src="./jquery-2.1.4/jquery-2.1.4.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>